<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            padding: 0px;
            margin: 0px;
        }

        .one {
            width: 50px;
            height: 50px;
            padding: 50px;
            border: 10px solid peru;
            margin: 0px;
            background-color: red;
            overflow: hidden;
        }

        .two {
            /*padding-top: 10px;*/
            /*padding-bottom: 20px;*/
            /*padding-left: 30px;*/
            /*padding-right: 40px;*/
            /*padding 可以直接写4个方向的距离
            4个:上 右 下 左
            3个:上 右 下 左没写会与右保持一致
            2个:上 右 左与右一致,上与下一致
            */
            padding: 10px 20px 30px 40px;
            background-color: #f00;
        }
        .three{
            /* 如果想要覆盖
            切记用小属性 去叠大属性
           */
            padding: 10px;
            width: 50px;
            background-color: #ff0e61;
        }
    </style>
</head>
<body>
<!--什么标签是盒子
所有里面能放东西的标签都是盒子
比如 div,span,a...
例如img,表单...就不是盒子

一个盒子主要由4部分组成:
内容:设置的宽高 就是设置内容的宽高
padding:内容到边框的距离
border:边框的粗细
margin:边框以外多少距离不能有其他元素
-->

<div>
    我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子我一个盒子
</div>

<div class="one">
    <img src="http://placekitten.com/50/50">
</div>
<div class="two">
    <img src="http://placekitten.com/50/50">
</div>
<ul>
    <li>A</li>
    <li>B</li>
    <li>c</li>
</ul>
</body>
</html>